<template>
  <div class="container">
    <el-card>
      <el-form
        ref="topForm"
        :model="form"
        @submit.native.prevent
      >
        <el-form-item prop="idNum" style="display: inline-block; width: 300px; margin-right: 12px; margin-bottom: 0;">
          <el-input v-model.trim="form.companyNameForeign" clearable placeholder="搜索客户名称" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form>
    </el-card>
    <el-card style="margin-top: 12px; margin-bottom: 22px">
      <BaseTable
        ref="clientAccountTable"
        :table-data="tableData"
        :table-list="tableList"
        :total="total"
        :loading="clientAccoutLoading"
        show-index
        show-pagination
        @pagination="handlePagination"
      >
        <el-table-column
          fixed="right"
          label="操作"
          width="110px"
        >
          <template v-slot="scope">
            <el-button v-permission="['f04_01']" type="text" @click="detail(scope.row)">账户详情</el-button>
          </template>
        </el-table-column>
      </BaseTable>
    </el-card>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import { accountList } from '@/service/accountManage'
import { getDictionaryLabel, formatMoneyAmount, formatUserName } from '@/utils/tools'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'ClientAccountManagement',
  components: {
    BaseTable
  },
  data() {
    return {
      form: {
        companyNameForeign: ''
      },
      clientAccoutLoading: false,
      tableData: [],
      tableList: [
        {
          label: '客户名称',
          prop: 'companyNameForeign'
        },
        {
          label: '客户类型',
          prop: 'companyTypeCode',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = getDictionaryLabel(row[prop], this.company_type)
            return <span>{ text }</span>
          }
        },
        {
          label: '销售经理',
          prop: 'belongUserName',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatUserName(row[prop])
            return <span>{ text }</span>
          }
        },
        {
          label: '国家',
          prop: 'countryCode',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = row[prop] ? getDictionaryLabel(row[prop], this.country_code) : '-'
            return <span>{text}</span>
          }
        },
        {
          label: '返点余额（美元）',
          prop: 'rebateBalanceAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatMoneyAmount(row[prop])
            return <span>{text}</span>
          }
        },
        {
          label: '中信保剩余授信额度（美元）',
          prop: 'sinosureBalanceAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatMoneyAmount(row[prop])
            return <span>{text}</span>
          }
        },
        {
          label: '公司剩余授信额度（美元）',
          prop: 'creditBalanceAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatMoneyAmount(row[prop])
            return <span>{text}</span>
          }
        }
      ],
      pageIndex: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    ...mapState({
      country_code: state => state.base.country_code,
      company_type: state => state.base.company_type
    })
  },
  mounted() {
    this.getDictionary()
    this.requestData()
  },
  methods: {
    ...mapActions({
      getBaseDataList: 'base/getBaseDataList'
    }),
    async requestData() {
      this.clientAccoutLoading = true
      const params = {
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        ...this.form
      }
      const { records, total } = await accountList({ ...params }).finally(() => {
        this.clientAccoutLoading = false
      })
      this.total = total
      this.tableData = records
    },
    search() {
      this.pageIndex = 1
      this.pageSize = 10
      this.$refs.clientAccountTable.pageIndex = 1
      this.$refs.clientAccountTable.pageSize = 10
      this.requestData()
    },
    getDictionary() {
      this.getBaseDataList({ type: 'country_code' })
      this.getBaseDataList({ type: 'company_type' })
    },
    handlePagination(data) {
      const { pageIndex, pageSize } = data
      this.pageIndex = pageIndex
      this.pageSize = pageSize
      this.requestData()
    },
    detail(data) {
      const { id } = data
      this.$router.push({
        name: 'accountDetail',
        params: {
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 12px;
  width: calc(100% - 24px);
}
</style>
